﻿@model CustomerAddressListModel
@inject IPageHeadBuilder pagebuilder
@{
    Layout = "_TwoColumns";

    //title
    pagebuilder.AddTitleParts(Loc["Title.Account"]);
}

@section left
{
    @await Component.InvokeAsync("CustomerNavigation", new { selectedTabId = AccountNavigationEnum.Addresses })
}

<div class="page account-page address-list-page pl-lg-3 pt-lg-0 pt-3">
    @Html.AntiForgeryToken()
    <h1 class="h2 generalTitle">
        <div>@Loc["Account.CustomerAddresses"]</div>
    </h1>
    <a class="left-side-toggler mb-3" onclick="sideToggle()">
        <div class="inner">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="text">
            @Loc["Account.Navigation"]
        </div>
    </a>
    <div class="w-100">
        <b-button variant="outline-secondary" class="add-address-button my-3" onclick="location.href='@Url.RouteUrl("CustomerAddressAdd")'">
            <b-icon icon="clipboard-plus"></b-icon> @Loc["Common.AddNew"]
        </b-button>
    </div>
    @if (Model.Addresses.Any())
    {
        <div class="address-list table-responsive">
            <table class="table table-bordered hover-table">
                <thead>
                <tr>
                    <th scope="col">@Loc["Address.Fields.Name"]</th>
                    <th scope="col">@Loc["Address.Fields.Address"]</th>
                    <th scope="col"></th>
                </tr>
                </thead>
                <tbody>
                @for (var i = 0; i < Model.Addresses.Count; i++)
                {
                    var address = Model.Addresses[i];
                    <tr>
                        <td>
                            <h3 class="h5 mb-0">
                                @address.FirstName @address.LastName
                            </h3>
                            @address.Email
                        </td>
                        <td>
                            <ul class="m-0 p-0">
                                @if (address.PhoneEnabled)
                                {
                                    <li class="phone">
                                        <label class="mb-0">
                                            <strong>@Loc["Address.Fields.PhoneNumber"]:</strong>
                                        </label>
                                        @address.PhoneNumber
                                    </li>
                                }
                                @if (address.FaxEnabled)
                                {
                                    <li class="fax">
                                        <label class="mb-0">
                                            <strong>@Loc["Address.Fields.FaxNumber"]:</strong>
                                        </label>
                                        @address.FaxNumber
                                    </li>
                                }
                                @if (address.CompanyEnabled && !string.IsNullOrEmpty(address.Company))
                                {
                                    <li class="company">@address.Company</li>
                                }
                                @if (address.VatNumberEnabled && !string.IsNullOrEmpty(address.VatNumber))
                                {
                                    <li class="vatnumber">@address.VatNumber</li>
                                }
                                @if (address.StreetAddressEnabled)
                                {
                                    <li class="address1">
                                        @address.Address1
                                    </li>
                                }
                                @if (address.StreetAddress2Enabled && !string.IsNullOrEmpty(address.Address2))
                                {
                                    <li class="address2">
                                        @address.Address2
                                    </li>
                                }
                                @if (address.CityEnabled || address.StateProvinceEnabled || address.ZipPostalCodeEnabled)
                                {
                                    var cityStateZip = "";
                                    if (address.CityEnabled)
                                    {
                                        cityStateZip = address.City;
                                        if (address.StateProvinceEnabled || address.ZipPostalCodeEnabled)
                                        {
                                            cityStateZip += ",";
                                        }
                                    }

                                    if (address.StateProvinceEnabled)
                                    {
                                        if (!string.IsNullOrEmpty(cityStateZip))
                                        {
                                            cityStateZip += " ";
                                        }

                                        cityStateZip += address.StateProvinceName;
                                    }

                                    if (address.ZipPostalCodeEnabled)
                                    {
                                        if (!string.IsNullOrEmpty(cityStateZip))
                                        {
                                            cityStateZip += " ";
                                        }

                                        cityStateZip += address.ZipPostalCode;
                                    }

                                    <li class="city-state-zip">
                                        @cityStateZip
                                    </li>
                                }
                                @if (address.CountryEnabled && !string.IsNullOrEmpty(address.CountryName))
                                {
                                    <li class="country">
                                        @address.CountryName
                                    </li>
                                }
                                @if (!string.IsNullOrEmpty(address.FormattedCustomAddressAttributes))
                                {
                                    <li class="custom-attributes-view">
                                        @Html.Raw(address.FormattedCustomAddressAttributes)
                                    </li>
                                }
                            </ul>
                        </td>
                        <td>
                            <div class="buttons d-flex flex-column">
                                <button class="btn btn-secondary edit-address-button" onclick="location.href='@(Url.RouteUrl("CustomerAddressEdit", new { addressId = address.Id }))'">
                                    @Loc["Common.Edit"]
                                </button>
                                <button class="btn btn-danger delete-address-button mt-1" onclick="deletecustomeraddress('@(address.Id)')">
                                    @Loc["Common.Delete"]
                                </button>
                            </div>
                        </td>
                    </tr>
                }
                </tbody>
            </table>
        </div>
        <script asp-location="Footer">
                function deletecustomeraddress(addressId) {
                    if (confirm('@Loc["Admin.Common.AreYouSure"]')) {

                        var bodyFormData = new FormData();
                        bodyFormData.append('addressId', addressId);
                        bodyFormData.append('__RequestVerificationToken', document.querySelector('input[name=__RequestVerificationToken]').value);

                        axios({
                            url: '@Url.Action("AddressDelete", "Account")',
                            data: bodyFormData,
                            method: 'post',
                        }).then(function (response) {
                            location = response.data.redirect;
                        }).catch(function (error) {
                            alert(error)
                        })
                    }
                }
        </script>
    }
    else
    {
        <div class="no-data alert alert-info">
            @Loc["Account.CustomerAddresses.NoAddresses"]
        </div>
    }
</div>